import * as React from "react";
import { Modal, Table, Input } from "antd";
import { cloneDeep } from "lodash";
import { SearchOutlined } from "@ant-design/icons";
import { arrRemoveItem, arrRemoveItem2 } from "../../../../../../utils/common";
import {
  AjaxData,
  columnsDataCLass,
} from "../../../../../../data/interface/publicInterface";
import { getDeviceManagement } from "../../../deviceseversapi";
import EleAndWater from "../../../../../../compontents/EleAndWater";

export interface AddDeviceModalProps {
  visible: boolean;
  onOk: (data: any[]) => any;
  onCancel: () => any;
  selectedRowRecord: any[];
  selectedRowKeys: string[];
}

export interface AddDeviceModalState {
  visible: boolean;
  energyType: number;
  // selectedRowKeys: string[];
  // selectedRowRecord: any[];
}

class AddDeviceModal extends React.Component<
  AddDeviceModalProps,
  AddDeviceModalState
> {
  state = {
    visible: false,
    energyType: 1,
  };
  private columns: columnsDataCLass[] = [
    {
      key: "name",
      title: "设备名称",
      dataIndex: "name",
      width: 100,
    },
    {
      key: "no",
      title: "设备编号",
      dataIndex: "no",
      width: 100,
    },
    {
      key: "energyType",
      title: "能源类型",
      dataIndex: "energyType",
      width: 100,
      render: (text, record, index) => {
        let str = "";
        if (record.energyType === "1") {
          str = "电";
        } else if (record.energyType === "2") {
          str = "水";
        } else if (record.energyType === "3") {
          str = "原煤";
        } else if (record.energyType === "4") {
          str = "原油";
        } else if (record.energyType === "5") {
          str = "天然气";
        } else if (record.energyType === "6") {
          str = "蒸气";
        } else {
          str = "";
        }
        return str;
      },
    },

    {
      key: "address",
      title: "地址",
      dataIndex: "address",
      width: 100,
    },
  ];
  private dataSouce: any[] = [];
  private pageSize: number = 5;
  private pageIndex: number = 1;
  private total: number = 0;
  // private energyType: number = 1;
  private iptText: string = "";
  private selectedRowKeys: string[] = [
    "52937120621658113",
    "52937120626769921",
    "52937120628801537",
    "52937120630865921",
    "52971211303256065",
  ];
  private selectedRowRecord: any[] = [];
  onHandleOk() {
    this.props.onOk(this.selectedRowRecord);
    this.clearState();
  }
  onHandleCancel() {
    this.props.onCancel();
    this.clearState();
  }
  clearState() {
    // this.setState({ selectedRowKeys: [], selectedRowRecord: [] });
    this.selectedRowRecord = [];
    this.selectedRowKeys = [];
    this.pageIndex = 1;
    this.total = 0;
    // this.forceUpdate();
  }
  componentWillMount() {}
  shouldComponentUpdate(
    newProps: AddDeviceModalProps,
    newState: AddDeviceModalState
  ) {
    if (newProps.visible !== this.props.visible) {
      this.setState({
        visible: newProps.visible,
      });
      this.selectedRowRecord = newProps.selectedRowRecord;
      this.selectedRowKeys = newProps.selectedRowKeys;
      this.forceUpdate();
      this.getDataSouce();
      console.log(this.selectedRowKeys, this.selectedRowRecord);
    }
    if (newState.energyType !== this.state.energyType) {
      console.log("energyType:", newState.energyType);
      this.clearState();
      this.forceUpdate();
      this.getDataSouce(newState.energyType);
    }
    return true;
  }
  //选中的虚拟设备
  onSelectChange = (record, selected) => {
    console.log(record, selected);
    let seleItem: any[] = cloneDeep(this.selectedRowRecord);
    let seleArr: any[] = cloneDeep(this.selectedRowKeys);
    console.log(seleArr, seleItem);
    if (selected) {
      //选中
      seleArr.push(record.id);
      seleItem.push(record);
    } else {
      //取消
      seleArr = arrRemoveItem(record.id, seleArr);
      seleItem = arrRemoveItem2(record.id, seleItem);
    }
    this.selectedRowRecord = seleItem;
    this.selectedRowKeys = seleArr;
    this.forceUpdate();
    // this.setState({ selectedRowKeys: seleArr, selectedRowRecord: seleItem });
  };
  //全选虚拟设备
  onSelectAll = (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
    let seleItem: any[] = cloneDeep(this.selectedRowRecord);
    let seleArr: any[] = cloneDeep(this.selectedRowKeys);

    if (selected) {
      changeRows.map((item) => {
        seleArr.push(item.key);
        seleItem.push(item);
        // seleArr = Array.from(new Set(seleArr));
        // seleItem = Array.from(new Set(seleItem));
        return item;
      });
    } else {
      changeRows.map((item) => {
        seleArr = arrRemoveItem(item.id, seleArr);
        seleItem = arrRemoveItem2(item.id, seleItem);
        return item;
      });
    }
    console.log("onSelectAll");
    console.log(seleArr, seleItem);
    this.selectedRowRecord = seleItem;
    this.selectedRowKeys = seleArr;
    this.forceUpdate();
    // this.setState({ selectedRowKeys: seleArr, selectedRowRecord: seleItem });
  };
  /**请求数据 */
  async getDataSouce(num?: number) {
    let { pageIndex, pageSize } = this;
    try {
      let pream = {
        pageIndex,
        pageSize,
        queryData: {
          energyType: num ? num : this.state.energyType,
          isFictitious: "0",
          terVal: this.iptText,
        },
      };
      let res: any = await getDeviceManagement(pream);
      let json: AjaxData = res;
      if (json.success) {
        this.dataSouce = json.data.records.map((item) => {
          item.key = item.id;
          return item;
        });
        this.total = json.data.total;
        this.forceUpdate();
      }
    } catch (error) {}
  }
  render() {
    const rowSelection = {
      selectedRowKeys: this.selectedRowKeys,
      onSelect: this.onSelectChange,
      onSelectAll: this.onSelectAll,
    };
    return (
      <Modal
        title="选择设备"
        visible={this.state.visible}
        onOk={() => {
          this.onHandleOk();
        }}
        onCancel={() => {
          this.onHandleCancel();
        }}
        maskClosable={false}
      >
        <div style={{ paddingBottom: 16 }}>
          <EleAndWater
            onChange={(num: number) => {
              // this.energyType = num;
              this.setState({ energyType: num });
            }}
          />
          <div className="f-right" style={{ textAlign: "right" }}>
            <Input.Group compact>
              <Input
                style={{ width: "60%" }}
                placeholder="关键字搜索"
                onChange={(e) => {
                  this.iptText = e.target.value;
                  this.forceUpdate();
                }}
                value={this.iptText}
                bordered={false}
                prefix={
                  <SearchOutlined
                    onClick={() => {
                      // this.keyWordSearch(this.iptText);
                      this.clearState();
                      this.getDataSouce();
                    }}
                  />
                }
              />
            </Input.Group>
          </div>
        </div>
        <Table
          columns={this.columns}
          dataSource={this.dataSouce}
          rowSelection={{
            ...rowSelection,
          }}
          pagination={{
            pageSize: this.pageSize,
            current: this.pageIndex,
            total: this.total,
            onChange: (page: number) => {
              this.pageIndex = page;
              this.getDataSouce();
            },
          }}
        ></Table>
      </Modal>
    );
  }
}

export default AddDeviceModal;
